<template>
	<div>
		<Tabs :value="params.status" @on-click="handleChangeTab">
	        <TabPane name="1" label="商品库"></TabPane>
	        <TabPane name="2" label="已下架"></TabPane>
	        <TabPane name="0" label="仓库中"></TabPane>
	        <TabPane name="-1" label="回收站"></TabPane>
	    </Tabs>
	    <SuperTable
	    	ref="table"
	    	path="API_GOODS_LISTS"
	    	:columns="columns"
	    	:params="params"
	    	loading
	    	@on-loaded="switchLoading = false"
	    	@on-selection-change="handleChangeSelection"
	    >
	    	<div slot="header-left">
	    		<Button type="primary" @click="handleGoEdit()">商品建档</Button>
	    		<RadioGroup type="button" style="margin-left: 10px;">
			        <Radio label="SPU查看"></Radio>
			        <Radio label="SKU查看"></Radio>
			    </RadioGroup>
	    	</div>
	    	
	    	<Form slot="header-right" :model="filterForm" inline @submit.native.prevent>
	    		<FormItem label="按分类">
	    			<SelectCategory v-model="filterForm.catid" change-on-select style="width: 200px" />
	    		</FormItem>
                <FormItem label="按品牌">
                	<SelectBrand v-model="filterForm.brand_id" style="width: 130px" />
                </FormItem>
                <FormItem label="按类别">
                	<Select style="width: 120px">
                		<Option :value="-1">全部</Option>
				        <Option :value="0">普通商品</Option>
				        <Option :value="1">跨境商品</Option>
				    </Select>
                </FormItem>
                <FormItem label="按渠道">
                	<Select style="width: 120px">
				        <Option :value="0">全渠道销售</Option>
				        <Option :value="1">仅线上销售</Option>
				        <Option :value="1">仅线下销售</Option>
				    </Select>
                </FormItem>
                <FormItem label="关键词">
                    <Input v-model="filterForm.keywords" placeholder="请输入关键词搜索" suffix="ios-search" clearable style="width: 180px"></Input>
                </FormItem>
                <Button type="primary" @click="handleSearch">筛选</Button>
	    	</Form>
	    	
	    	<div slot="page-left">
	    		<Button v-if="params.status == 0" @click="handleBatchStaus(1)">上架</Button>
	    		<Button v-if="params.status == 1" @click="handleBatchStaus(0)">下架</Button>
	    		<Button v-if="params.status != -1" @click="handleBatchRecovery(-1)">删除</Button>
	    		<Button v-if="params.status == -1" @click="handleBatchDestroy">销毁</Button>
	    		<Button v-if="params.status == -1" @click="handleBatchRecovery(1)">恢复</Button>
	    		<Button @click="handleShowBatchModify">批量修改</Button>
	    	</div>
	    	
	    	<div class="ui-table-cell ui-flex" slot-scope="{ row }" slot="goods">
	    		<ImageCell :src="row.thumb"></ImageCell>
	            <div class="ui-flex-full" style="margin-left: 10px;">
	            	<p class="ui-ellipsis2">{{ row.name }}</p>
	            	<p class="ui-ellipsis">供应商：</p>
	            </div>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="brand_category">
	        	<PoptipCells
	        		title="品牌&主分类"
	        		:value='[`品牌：${row.brand && row.brand.name ? row.brand.name : ""}`, `分类：${row.category_text && row.category_text.name ? row.category_text.name : "-"}`]'
	        	>
	        		<p class="ui-table-cell-line ui-ellipsis">品牌：{{ row.brand && row.brand.name ? row.brand.name : "" }}</p>
	            	<p class="ui-table-cell-line ui-ellipsis">分类：{{ row.category_text && row.category_text.name ? row.category_text.name : "-" }}</p>
	        	</PoptipCells>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="channel">
        		<p class="ui-table-cell-line">渠道：仅线上销售</p>
            	<p class="ui-table-cell-line">类别：{{ row.type == 1 ? '跨境商品' : '普通商品' }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="status">
        		<p class="ui-table-cell-line">销售状态：<span class="ui-text-primary">{{row.status_text}}</span></p>
            	<p class="ui-table-cell-line">审核状态：<span class="ui-text-error">未审核</span></p>
	        </div>
	        <div slot-scope="{ row }" slot="action">
	        	<template v-if="params.status != 4">
	        		<PoptipTable v-if="row.spec_type == 2" :columns="specColumns" :data="row.sku_info" placement="left" :width="800">
	        			<Button type="warning" size="small">规格查看</Button>
	        		</PoptipTable>
	        		<Button type="warning" size="small" v-if="row.spec_type == 1" disabled>规格查看</Button>
	        	</template>
	        	
	        	<Button type="primary" size="small" @click="handleGoEdit({id: row.id})">编辑</Button>
	        	
	        	<template v-if="params.status == 1 || params.status == 0">
	        		<Poptip
				        confirm
				        transfer
				        placement="left"
				        title="是否确认删除此商品？"
				        @on-ok="handleRecovery(row.id, -1)"
				    >
				        <Button type="error" size="small">删除</Button>
				    </Poptip>
	        	</template>
	        	
	        	<template v-if="params.status == -1">
	        		<Button type="success" size="small" @click="handleRecovery(row.id, 1)">恢复</Button>
	        		<Poptip
				        confirm
				        transfer
				        placement="left"
				        title="是否确认销毁此商品，销毁后不可恢复？"
				        @on-ok="handleDestroy(row.id)"
				    >
				    	<Button type="error" size="small">销毁</Button>
				    </Poptip>
	        	</template>
	        </div>
	    </SuperTable>
	    <!--<Button v-if="params.status == 1" type="primary" size="small">商品入库</Button>-->
	    <LoadingMask v-if="switchLoading"></LoadingMask>
	    
	    <!-- 批量修改 -->
	    <DrawerForm v-model="showBatchModifyModal" title="商品批量修改" @on-ok="handleBatchModify">
	    	<Form ref="modifyForm" :mode="modifyForm" label-position="top" @submit.native.prevent>
	    		<FormItem label="分类">
	    			<SelectCategory v-model="modifyForm.catid" />
	    		</FormItem>
                <FormItem label="品牌">
                    <SelectBrand v-model="modifyForm.brand_id" />
                </FormItem>
	    	</Form>
	    </DrawerForm>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import SuperTable from '@/components/SuperTable.vue';
import LoadingMask from '@/components/LoadingMask.vue';
import ImageCell from '@/components/ImageCell/index.vue';
import PoptipCells from '@/components/PoptipCells.vue';
import PoptipTable from '@/components/PoptipTable.vue';
import DrawerForm from '@/components/DrawerForm.vue';

import SelectBrand from '@/components/form/SelectBrand.vue';
import SelectCategory from '@/components/form/SelectCategory.vue';
export default {
	name: 'goodsList',
	components: {
		SuperTable,
		ImageCell,
		PoptipCells,
		PoptipTable,
		LoadingMask,
		DrawerForm,
		SelectBrand,
		SelectCategory
	},
	data() {
		return {
			switchLoading: false,
			showBatchModifyModal: false,
			ids: [],
			modifyForm: {
				brand_id: undefined,
				catid: []
			},
			filterForm: {
				keywords: '',
				brand_id: undefined,
				catid: []
			},
			params: {
				status: '1',
				keywords: '',
				catid: '',
				brand_id: '',
				page: 1,
				limit: 10,
				relations: ['brand']
			},
			columns: [
				{
                    type: 'selection',
                    width: 40,
                    align: 'center'
                },
                {
                    title: '商品',
                    slot: 'goods',
                    minWidth: 300
                },
                {
                    title: '品牌&主分类',
                    slot: 'brand_category',
                    minWidth: 177
                },
                {
                    title: '渠道&类别',
                    slot: 'channel',
                    minWidth: 130
                },
                {
                    title: '销售状态&审核状态',
                    slot: 'status',
                    minWidth: 135
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: "center",
                    width: 180
                },
			],
			specColumns: [
                {
                    title: "规格值",
                    key: "name",
                    minWidth: 200,
                    render: (h, params) => {
                    	let tags = [];
                    	if(Array.isArray(params.row.spec)) {
                    		tags = params.row.spec.map(item => {
	                    		return h('Tag', item.name +':'+ item.value);
	                    	})
                    	}else{
                    		tags.push(h('Tag', params.row.spec.name +':'+ params.row.spec.value));
                    	}
                    	return h('div', tags);
                    }
                },
                {
                    title: "条码",
                    key: "sn"
                },
                {
                    title: "货号",
                    key: "hh"
                },
                {
                    title: "成本价",
                    key: "shop_price"
                },
                {
                    title: "批发价",
                    key: "shop_price"
                },
                {
                    title: "销售价",
                    key: "shop_price"
                },
                {
                    title: "库存",
                    key: "number"
                }
            ]
		}
	},
	methods: {
		// 切换选项卡
		handleChangeTab(name) {
			this.switchLoading = true;
			this.params.status = name;
		},
		// 搜索
		handleSearch() {
			let cats = this.filterForm.catid;
			if(cats.length > 0) {
				this.params.catid = cats[cats.length - 1];
			}else{
				this.params.catid = '';
			}
			this.params.brand_id = this.filterForm.brand_id || '';
			this.params.keywords = this.filterForm.keywords;
		},
		// 表格选中触发事件
		handleChangeSelection(selection) {
			this.ids = selection.map(item => {
				return item.id;
			})
		},
		// 跳转编辑页
		handleGoEdit(query) {
			this.$router.push({name: 'goods_goods_edit', query});
		},
		// -1删除商品、1恢复商品
		handleRecovery(id, status) {
			Util.ajax.post(this.API['API_GOODS_RECYCLE'], {id: id, status: status}).then(res => {
				this.$Message.success("操作成功");
				this.$refs.table.init();
			}).catch(() => {
				
			})
		},
		// 销毁商品
		handleDestroy(id, status) {
			Util.ajax.post(this.API['API_GOODS_DESTORY'], {id: id}).then(res => {
				this.$Message.success("销毁成功");
				this.$refs.table.init();
			}).catch(() => {
				
			})
		},
		// 批量上下架
		handleBatchStaus(status) {
			if(this.ids.length == 0) {
				this.$Message.error("请至少选择一件商品");
				return false;
			}
			let txt = (status == 1 ? '上架' : '下架');
			this.$Modal.confirm({
                title: '操作确认',
                content: '<p>是否确认批量'+ txt +'所选商品？</p>',
                onOk: () => {
                    Util.ajax.post(this.API['API_GOODS_BATCH_PULLOFF'], {ids: this.ids, status: status}).then(res => {
						this.$Message.success("批量"+ txt +"成功");
						this.$refs.table.init();
					}).catch(() => {
						
					})
                }
            });
		},
		// 打开批量修改弹窗
		handleShowBatchModify() {
			if(this.ids.length == 0) {
				this.$Message.error('请至少选择一件商品');
				return false;
			}
			this.showBatchModifyModal = true;
		},
		// 批量修改
		handleBatchModify() {
			let form = this.modifyForm;
			let params = {
				ids: this.ids
			}
			if(form.brand_id) {
				params.brand_id = form.brand_id;
			}
			if(form.catid.length > 0) {
				params.catid = form.catid[form.catid.length - 1];
			}
			// 未选择数据的情况下
			if(!params.brand_id && !params.catid) {
				this.showBatchModifyModal = false;
				return false;
			}
			Util.ajax.post(this.API['API_GOODS_BATCH_SET_BRAND'], params).then(res => {
				this.$Message.success('批量修改成功');
				this.$refs.table.init();
				this.showBatchModifyModal = false;
			}).catch(() => {
				
			})
		},
		// 批量销毁
		handleBatchDestroy() {
			if(this.ids.length == 0) {
				this.$Message.error("请至少选择一件商品");
				return false;
			}
			this.$Modal.confirm({
                title: '操作确认',
                content: '<p>是否确认批量销毁所选商品？</p>',
                onOk: () => {
                    Util.ajax.post(this.API['API_GOODS_BATCH_DESTORY'], {id: this.ids}).then(res => {
						this.$Message.success("销毁成功");
						this.$refs.table.init();
					}).catch(() => {
						
					})
                }
            });
		},
		// 批量恢复、删除
		handleBatchRecovery(status) {
			if(this.ids.length == 0) {
				this.$Message.error("请至少选择一件商品");
				return false;
			}
			let txt = (status == 1 ? '恢复' : '删除');
			this.$Modal.confirm({
                title: '操作确认',
                content: '<p>是否确认将所选商品'+ txt +'？</p>',
                onOk: () => {
                    Util.ajax.post(this.api['API_GOODS_BATCH_RECYCLE'], {ids: this.ids, status: status}).then(res => {
						this.$Message.success("批量操作成功");
						this.$refs.table.init();
					}).catch(() => {
						
					})
                }
            });
		}
	}
}
</script>